<template>
	<view class="guide">
		<!-- 自定义头部 -->
		<view class="header">
			<uni-nav-bar left-icon="back" :title="type===1?'保养签到指引':'保养签退指引'" statusBar="true" backgroundColor="#000" color="#fff" :fixed="true" @clickLeft="handleBack"></uni-nav-bar>
		</view>
		<view class="content">
			<!-- 保养签到指引 -->	
		<view v-if="type === 1">
			<view class="title">请按照以下要求进行入场拍照签到</view>
			<view class="by_item">
				<view class="name">保养-公用电梯，请拍摄电梯使用证</view>
				<image src="https://erised-fresh.oss-cn-shenzhen.aliyuncs.com/upload/20211229/70371c3c3b71929001ec9bbf3a5a3fd6.png"></image>
			</view>
			<view class="by_item">
				<view class="name">保养-私用电梯，请拍摄控制柜铭牌</view>
				<image src="https://erised-fresh.oss-cn-shenzhen.aliyuncs.com/upload/20211229/b5feb1c0a4b8bcbf5bab699778bf4674.png"></image>
			</view>
			
		</view>
		<!-- 签退 -->
		<view v-if="type === 2">
			<view class="title">请按照以下要求进行退场拍照签退</view>
			<view class="by_item">
				<view class="name">保养完成后，请拍摄电梯保养单</view>
				<image class="img" src="https://erised-fresh.oss-cn-shenzhen.aliyuncs.com/upload/20211229/79df9908bfb19c91272b786c8d25caef.png"
				></image>
			</view>
			
		</view>
		</view>
		<view class="bottom" @click="handleBack"><view class="know flex">我知道了</view></view>
	</view>
</template>

<script>
import UniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
export default {
	components: {
		UniNavBar
	},
	props: {},

	data() {
		return {
			title: '保养签到指引',
			type: 2
		};
	},
	onLoad(opt) {
		console.log(opt);
		this.type = Number(opt.type);
	},
	methods: {
		handleBack() {
			uni.navigateBack({});
		}
	}
};
</script>
<style>
page {
	background-color: #f3f6f8;
}
</style>
<style lang="scss" scoped>
header {
	font-size: 38rpx;
}
.content {
	background-color: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 32rpx;
	image{
		width: 488rpx;
		height: 348rpx;
	}
	.title{
		color: #ccc;
		font-size: 28rpx;
		margin-bottom: 32rpx;
		width: 100%;
		display: flex;
		justify-content: center;
	}
	.by_item{
		width: 100%;
		.name{
			font-size: 32rpx;
			color: #333;
			font-weight: 500;
			margin-bottom: 14rpx;
			display: flex;
			width: 100%;
			justify-content: center;
			
		}
		.img{
			width: 596rpx;
			height: 840rpx;
		}
		margin-bottom: 46rpx;
	}
}

.bottom {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 98rpx;
	background: #ffffff;
	position: fixed;
	bottom: 0;
	width: 750rpx;
	.know {
		width: 722rpx;
		height: 70rpx;
		color: #fff;
		background: #0091ff;
		border-radius: 8rpx;
	}
}
</style>
